<template>
	<div v-if="filmsData" class="da">
		<button type="button" class="backs" @click="toback">〈 返回</button>
		<detail-header v-scroll="50">
			{{filmsData.name}}
		</detail-header>
		<div class="poster" :style="{
			backgroundImage:'url('+filmsData.poster+')'  //这里要注意！
		}"></div>
		<ul class="moviedetail">
			<li>{{filmsData.name}}</li>
			<li>{{filmsData.category}}</li>
			<li>{{computeday}}</li>
			<li>{{filmsData.nation}} | {{filmsData.runtime}}分钟</li>
			<li class="synopsis" :class="ishidden?'yincang':''">{{filmsData.synopsis}}</li>
			<li @click="ishidden = !ishidden" style="text-align: center;" v-if="ishidden">〇</li>
			<li @click="ishidden = !ishidden" style="text-align: center;" v-else>□</li>
		</ul>
		<!-- 演职人员 -->
		<div class="actors">
			<div class="biaoti">演职人员</div>
			<detail-swiper :key="index" name = 'actor' :shuliang="4">
				<detail-swiper-item v-for="(item,index) in filmsData.actors" :key="item.avatarAddress">
					<div class="act">
						<div :style="{backgroundImage:'url('+item.avatarAddress+')'}" class='detailItem'></div>
						<div>{{item.name}}</div>
						<div>{{item.role}}</div>
					</div>
				</detail-swiper-item>
			</detail-swiper>
		</div>
		<!-- 剧照 -->
		<div class="actors">
			<div class="biaoti">剧照</div>
			<detail-swiper name = 'photo' :shuliang="2">
				<detail-swiper-item v-for="(item,index) in filmsData.photos" :key="index" >
					<div class="act">
						<div :style="{backgroundImage:'url('+item+')'}" class='detailItem' @click="preview(index)"></div>
					</div>
				</detail-swiper-item>
			</detail-swiper>
		</div>
	</div>
</template>

<script type="text/javascript">
	import http from '@/util/http.js'
	import obj from '@/util/mixIn.js'
	import detailSwiper from '../components/detail/detailSwiper.vue'
	import detailSwiperItem from '../components/detail/detailSwiperItem.vue'
	import detailHeader from '../components/detail/detailHeader.vue'
	import Vue from 'vue'
	import { ImagePreview } from 'vant';
	Vue.directive('scroll',{
		inserted(el, binding){
			el.style.display = 'none'
			
			onscroll = ()=>{
				if(document.documentElement.scrollTop > binding.value){
					el.style.display = 'block'
				}
				else
					el.style.display = 'none'
			}
		},
		unbind(){
			onscroll = null
		}
	})
	export default{
		mixins:[obj],
		components:{
			detailSwiper,
			detailSwiperItem,
			detailHeader
		},
		data(){
			return{
				fId:0,
				filmsData:null,
				ishidden:true
			}
		},
		methods:{
			toback(){
				this.$router.back()
			},
			preview(index){
				ImagePreview({
				  images: this.filmsData.photos,
				  startPosition: index,
				  closeable:true,
				  closeIconPosition:'top-left'
				});
			}
		},
		mounted() {
			this.fId = this.$route.params.id
			let _this = this;
			setTimeout(()=>{
				http({
					url:`/gateway?filmId=${this.fId}&k=6722283`,
					headers:{
						'X-Host':'mall.film-ticket.film.info'
					}
				}).then(res => {this.filmsData = res.data.data.film;})
			},1000)
		},
		computed:{
			computeday(){
				var date = new Date(this.filmsData.premiereAt*1000);
				var year = date.getFullYear()
				var mon = date.getMonth()+1
				var day = date.getDate()
				var riqi = year +'-' + mon + '-' + day;
				return riqi;
			}
		}
	}
</script>

<style type="text/css">
	.da{
		background-color: gray;
		margin-bottom: 1.5625rem;
	}
	.backs{
		position: fixed;
		background: transparent;
		outline: none;
		color: white;
		border: none;
		font-weight: bold;
		top: 0.5rem;
		left: 0;
	}
	.biaoti{
		text-indent: 0.3125rem;
		text-align: left;
	}
	.poster{
		width: 100%;
		height: 10.5rem;
		display: block;
		background-position: center;
		background-size: cover;
	}
	.moviedetail{
		display: flex;
		flex-direction: column;
		list-style-type: none;
		background-color: white;
	}
	.moviedetail>li:nth-child(1){
		font-size: 16px;
		color: black;
	}
	.moviedetail>li{
		font-size: 14px;
		margin-top: 0.3125rem;
		margin-left: 1.25rem;
		margin-right: 1.25rem;
		color: gray;
	}
	.synopsis{
		line-height: 17px;
		text-indent: 0;
	}
	.yincang{
		overflow: hidden;
		height: 34px;
	}
	.detailItem{
		background-position: center;
		width: 100%;
		height: 4rem;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.actors{
		background-color: white;
		font-size: 0.875rem;
		text-align: center;
	}
	.act{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.act>div{
		margin-top: 0.625rem;
	}
	.act>div:nth-child(2){
		color: #000000;
		font-size: 12px;
	}
	.act>div:nth-child(3){
		margin-top: 0.3125rem;
		color: grey;
		font-size: 13px;
	}
</style>